<template>
	<view>
	 <u-navbar
	            :safeAreaInsetTop="false"
				:bgColor="bgColor"
				:autoBack="true"
	        >
	           <view
	                class="u-nav-slot"
	                slot="left"
	            >
	            <view class="row-h-center">
	            	<image src="/static/images/detail-back.png" class="back">
	            	</image>
	            	<view class="title">
	            		{{title}}
	            	</view>
	            </view>
	            </view>
				<view
				     class="u-nav-slot"
				     slot="right"
				 >
				 <view class="row-h-center" >
				 	<image :src="collected==0?'/static/images/collect_white.png':'/static/images/collect_yellow.png'" class="collect" @click="addCollect()"></image>
				 	<view class="xiang row-center">
				 		详
				 	</view>
				 </view>
				 </view>
	        </u-navbar>
			<part :fromId="id"></part>
	</view>
</template>

<script>
	import part from '@/pages/home/part.vue'
	import {
		addFlow
	} from '@/api/change/index.js'
	
	export default {
		components:{
			part
		},
		data() {
			return {
				bgColor: '#000',
				id:'',
				title:'',
				collected:0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.title = option.title
			this.collected = option.collected
		},
		methods: {
			
			addCollect() {
				addFlow({workId:this.id}).then(res => {
					this.getData()
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back{
		width: 30rpx;
		height: 30rpx;
	}
	.title{
		color: white;
		font-size: 36rpx;
	}
	.collect{
		width: 50rpx;
		height: 50rpx;
	}
	.xiang{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 1rpx solid white;
		color: white;
		font-size: 32rpx;
		margin-left: 25rpx;
	}
</style>
